import { withRouter } from 'next/router'
// import Head from 'next/head'
// import Comp from '../components/comp'
import Link from 'next/link'
import styled from 'styled-components'
// import moment from 'moment'
import dynamic from 'next/dynamic'
// import getConfig from 'next/config'

const Title = styled.h1`
  color: yellow;
  font-size: 40px;
`

const Comp = dynamic(import('../components/comp'))

// const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()

const color = '#113366'

const A = ({ router, name, time }) => {
  // console.log(serverRuntimeConfig, publicRuntimeConfig)
  return (
    <>
      <Title>This is Title {time}</Title>
      <Comp />
      <Link href="#">
        <a className="link">
          A {router.query.id} {name}
        </a>
      </Link>
      <style jsx>{`
        a {
          color: red;
        }
        .link {
          color: color();
        }
      `}</style>
    </>
  )
}

A.getInitialProps = async (ctx) => {
  const moment = await import('moment')

  const promise = new Promise((reslove, reject) => {
    setTimeout(() => {
      reslove({
        name: 'test',
        time: moment.default(Date.now() - 60 * 1000).fromNow()
      })
    }, 100)
  })
  return await promise
}

export default withRouter(A)